<template>
  <div :style="{height:maxHeightProp}" class="grid-result-div" ref="grid-result-div">
    <div ref="grid-query-temp-div" class="grid-query-temp-div"><div class="grid-query-temp-div-span">查询中</div></div>
    <div class="grid-list-div" ref="grid-list-div">
      <table class="grid-result-table" cellpadding="0">
        <GridHeadComponent ref="content-head">
          <th></th>
          <th class="grid-header-th" v-bind:key="item.index" v-for="item in header" :style="{'min-width':item.width}"><span class="grid-th-span">{{item.name}}</span></th>
        </GridHeadComponent>
        <GridRowComponent
            :form-group="gridName"
            :key-property-name="keyPropertyName"
            ref="content-rows" v-bind:key="item[keyPropertyName]" v-for="item in showData"
            :showData="item">
          <slot></slot>
        </GridRowComponent>
      </table>
    </div>
    <div v-if="pagingModuel" ref="paging-div" class="grid-paging-div">
      <div class="grid-oper-div">
        <img class="page-oper-img" src="img/leftPage.png" @click="pageNumSub" alt="上一页"/>
        <div class="oper-padding-div"></div>
        <img class="page-oper-img" src="img/rightPage.png" @click="pageNumAdd" alt="下一页"/>
      </div>
      <div class="grid-page-num">
        第&nbsp;<input ref="curPageNum" class="grid-page-current" type="number"/>页&nbsp;&nbsp;/共{{totalPage}}页
      </div>
    </div>
  </div>
</template>


<script>
import GridRowComponent from "@/components/grid/GridRowComponent";
import GridHeadComponent from "@/components/grid/GridHeadComponent";
import {postRequest} from "@/axio2";

export default {
  name: "GridComponent",
  components: {GridHeadComponent, GridRowComponent},
  data(){
    return{
      header:[],
      showData:[],
      params: {},
      totalPage:0,
      selectArr:Set,
      selectDataArr:Set
    }
  },
  methods:{
    pageNumAdd(){
      let pagNum = parseInt(this.$refs.curPageNum.value) + 1;
      if(pagNum>this.totalPage){
        pagNum = this.totalPage;
      }
      this.$refs.curPageNum.value = pagNum
      this.params["currentPage"]=this.$refs.curPageNum.value;
      this.load();
    },
    pageNumSub(){
      let pagNum = parseInt(this.$refs.curPageNum.value) - 1;
      if(pagNum<1){
        pagNum = 1;
      }
      this.$refs.curPageNum.value = pagNum;
      this.params["currentPage"]=this.$refs.curPageNum.value;
      this.load();
    },
    load(){
      this.showData=[];
      this.$refs["grid-list-div"].style["background-color"]="#fff";
      this.$refs["grid-list-div"].style["filter"]="Alpha(Opacity=60)";
      this.$refs["grid-list-div"].style["opacity"]="0.2";
      this.$refs["grid-query-temp-div"].style["display"]="block";
      // 设置提示框位置
      let allWidth = this.$refs["grid-result-div"].clientWidth;
      this.$refs["grid-query-temp-div"].style["left"] = (allWidth-170.0)/2.0+"px";
      postRequest(
          this.loadUrl,
          this.params,
          this.parseQueryResult,
          null,
          this
      );
      this.selectArr=new Set;
      this.selectDataArr = new Set;
    },
    addQueryParams:function (param) {
      this.params = param;
      if(undefined!==this.$refs.curPageNum){
        this.params["currentPage"]=this.$refs.curPageNum.value;
      }
    },
    parseQueryResult:function (data,component) {
      this.$refs["grid-list-div"].style["background-color"]="";
      this.$refs["grid-list-div"].style["filter"]="";
      this.$refs["grid-list-div"].style["opacity"]="";
      this.$refs["grid-query-temp-div"].style["display"]="none";
      component.$data["showData"]=data.data.resultData;
      let paging = data.data.paging;
      component.$data["totalPage"]=paging.totalPage;
    },
    selectRow(data){
      if(undefined===this.selectArr){
        this.selectArr = new Set;
        this.selectDataArr = new Set;
      }else if('single'===this.selectModuel){
        this.selectArr = new Set;
        this.selectDataArr = new Set;
      }
      this.selectArr.add(data[this.keyPropertyName]);
      this.selectDataArr.add(data);
    },
    unSelectRow(data){
      this.selectArr.delete(data[this.keyPropertyName]);
      this.selectDataArr.delete(data);
    },
    getSelectKeys(){
      let ids = [...this.selectArr];
      let result = "";
      for (let argument of ids) {
        result = result + argument + ",";
      }
      result = result.substring(0,result.length-1);
      return result;
    },
    getSelectData(){
      return [...this.selectDataArr];
    },
    setOutData(data){
      this.showData = data;
    }
  },
  props:{
    selectModuel:String,// single-单选、multify-复�
    pagingModuel:Boolean,// paging-分页、unpage-不分�
    outData:Array,// 支持外部传入数据
    loadUrl:String,// 设置表格查询的HTTP地址，可以为�
    autoLoad:Boolean,// 是否自动触发查询
    gridName: String,// Grid名称，用于单选唯一使用
    keyPropertyName:{
      type:String,
      default:()=>{
        "id"
      }
    },// 数据主键名称，默认id
    maxHeightProp:String// 最大高�
  },
  mounted() {
    // 从显示区域里
    this.header = [];
    let columnNode = this.$slots["default"];
    for (let i = 0; i < columnNode.length; i++) {
      let headParam = {'index':i, 'name':columnNode[i].componentOptions.propsData["columnName"],'width':columnNode[i].componentOptions.propsData["width"]}
      this.header.push(headParam);
    }
    this.$on("recordSelect",this.selectRow);
    this.$on("recordUnSelect",this.unSelectRow);
    // 默认页数
    if(undefined!==this.$refs.curPageNum && (""===this.$refs.curPageNum.value || undefined===this.$refs.curPageNum.value)){
      this.$refs.curPageNum.value=1;
      this.addQueryParams({currentPage:1});
    }
    if(undefined!==this.outData){
      this.showData = this.outData;
    }
    if(undefined===this.gridName){
      this.gridName = "componentCommonGrid";
    }
    if(undefined===this.maxHeight){
      this.maxHeight = "80%";
    }
    // 如果自动加载则触发一次查�
    if(this.autoLoad){
      this.load();
    }
  }
}
</script>

<style scoped>
.grid-query-temp-div{
  background: #ddfefe;
  border: 1px solid #000;
  padding-top: 4px;
  padding-bottom: 4px;
  width: 130px;
  position: absolute;
  top:25%;
  margin: auto;
  display: none;
  z-index: 999;
}
.grid-query-temp-div-span{
  border: 1px solid #000;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 120px;
  text-align: center;

}
.grid-result-div{
  height: 80%;
  position:relative;
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
.grid-header-th{
  border-left: 1px solid #bbbbbb;
}
.grid-th-span{
  margin-right: 6px;
  margin-left: 6px;
}
.grid-list-div{
  overflow:auto;
  white-space: nowrap;
  height: 93%;
  border-top: 1px solid #cccccc;
}
.grid-result-table{
  border-left-style: none;
  border-right: 1px solid #cccccc;
  border-collapse: collapse;
  text-align: center;
}
.grid-paging-div{
  width: 100%;
  text-align: right;
  background: #dddddd;
}
.grid-page-num{
  display: inline-block;
  padding-top: 7px;
  padding-bottom: 10px;
  padding-right: 15px;
}
.grid-page-current{
  width: 20px;
}
.grid-oper-div{
  display: inline-block;
  padding-right: 15px;
  height: 100%;
}
.page-oper-img{
  display: inline-block;
  height: 16px;
}
.oper-padding-div{
  display: inline-block;
  width: 20px;
}
/* 表格奇数行变�*/
/*添加css样式*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
table tr:nth-child(even){background: #e0fafa}
</style>